<template>
  <div class="mine-box">
    <van-nav-bar
      title="OBT兑换"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      class="nav-bar"
    />
  	<div class="mine-container">
      <van-row style='border: 1px solid #CCCCCC'>
        <van-col style="line-height:44px;color: #fff;" span='3'>
          OBT:
        </van-col>
        <van-col span='15'>
          <input
            class="inp"
            @keyup='changeNum'
            v-model="approximate"
            type="number"
          />
        </van-col>
        <van-col class="operation" span='3'>
          <span @click="reduce">-</span>
        </van-col>
        <van-col class="operation" span='3'>
          <span @click="addNum">+</span>
        </van-col>
      </van-row>
      <van-row>
        <van-col span='22' class="usdt-txt">
          ={{ approximatechild }} USDT
        </van-col>
      </van-row>
      <van-button
        size="large"
        class="btn-invest"
        @click="clickInvest"
      >兑换</van-button>
      <!-- <van-row style='border: 1px solid #CCCCCC;' >
        <van-col span='20' style='text-align: left; text-indent: 0.3em;'>
          <input class="inp" style="border: none;" placeholder="数量"  v-model="num" />
        </van-col>
        <van-col span='4' style='text-align: left;line-height: 40px; text-indent: 0.3em;' >
          ESO
        </van-col>
      </van-row>
      <van-row>
        <van-col span='22' style='text-align: left; text-indent: 0.3em;'>
          可用：{{kyUSDT}}USDT
        </van-col>
      </van-row> -->
    </div>
   </div>
</template>

<script>
  import { Toast } from 'vant';
  import { Dialog } from 'vant';
  export default {
    data(){
      return {
      	approximate: 0,
      	approximatechild:0,
      	num:'',
      	moneInp:'',
      	kyUSDT:'',
        USDTVal: 0,
        lastPageUrl:""
      }
    },
    created(){

    },
    mounted(){
      this.lastPageUrl = sessionStorage.getItem("lastAndNowPage").split('-')[1];
    sessionStorage.setItem("lastAndNowPage",this.lastPageUrl+"-/OBTRecharge");
      token_g = JSON.parse(sessionStorage.getItem("usermessage")).token

      // 获取USDT转换汇率
      let cont = {
        type:'USDT_TK'
      }
      this.$axios({
        method: 'GET',
        url: url_g + '/config/',
        params: cont,
        headers: {
          'Authorization': 'Bearer ' + token_g
        }
      }).then((res) => {
        this.USDTVal = parseFloat(res.data.results[0].value)
      }).catch((e) => {
              Toast(e.response.data.detail);
      });
    },
    methods:{
      onClickLeft(){
        this.$router.push(this.lastPageUrl)
      },
    	addNum(){
        // 判断是否是数字
        if(this.isRealNum(this.approximate)) {
          this.approximate = parseFloat(this.approximate) + 1
          this.approximatechild = parseFloat(this.approximate) * this.USDTVal
        } else {
          this.approximate = 0
        }
    	},
    	reduce(){
        // 判断是否是数字
        if(this.isRealNum(this.approximate)) {
          if(this.approximate > 0){
            this.approximate = parseFloat(this.approximate) - 1

            this.approximatechild = parseFloat(this.approximate) * this.USDTVal
          }
        } else {
          this.approximate = 0
        }
    	},
    	changeNum(){
        // 判断是否是数字
        if(this.isRealNum(this.approximate)) {
          // 去掉数字前面的0
          this.approximate = this.approximate.replace(/\b(0+)/gi,"")
          this.approximatechild = parseFloat(this.approximate) * this.USDTVal
        } else {
          this.approximate = 0
        }
    	},
      isRealNum(val){
        // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除
        if(val === "" || val ==null){
          return false;
        }
        if(!isNaN(val)){
          return true;
        }else{
          return false;
        }
      },
      clickInvest() {
        this.$axios({
          method: 'POST',
          url: url_g + '/trade/',
          data: {
            type: "0",
            qty: this.approximatechild + ""
          },
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          console.log(res)
          if(res.data && res.data.detail){
            this.toast =  Toast('兑换成功');
            this.changeNum = 0;
          }
        }).catch((e) => {
            if(e.response && e.response.data){
              Toast(e.response.data.detail);
            }else{
              this.toast =  Toast('兑换失败');
            }
        });
      }
    }
  }
</script>

<style scoped>
.mine-box{
  height: 100vh;
	text-align: center;
  background: -webkit-linear-gradient( top,#028aed,#273eec);
}
.inp{
	width: 100%;
	height: 40px;
	line-height: 40px;
	border: 1px solid #ccc;
}
.nav-bar {
  color: #000;
}
.mine-container {
  padding: 10px;
  width: calc(100% - 20px);
}
.operation{
  height: 100%;
	line-height: 44px;
	font-size: 26px;
	color: #fff;
  border-left: 1px solid #fff;
}
.operation span{
	text-align: center;
}
.btn-invest {
  margin-top: 20px;
  background-color: transparent;
  color: #fff;
}
.usdt-txt {
  text-align: left;
  text-indent: 0.3em;
  margin-top: 10px;
  color: #fff;
}
</style>
